<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>51微贷</title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../../css/info.css">
		<link rel="stylesheet" type="text/css" href="../../css/icomoon/style.css">
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css">
		<script type="text/javascript" src="../../js/rem.js"></script>
	</head>

	<body>
		<div class="m-cal">
			<h3 class="header f-pr">
				<span>收益计算器</span>
				<i class="icon-angle-left f-pa"></i>
			</h3>
			<ul class="cal-child-list">
				<li>
					<span>投资金额</span>
					<span class="f-fr">
						<input type="tel" placeholder="请输入投资金额" id="amount" value="10000">
						<small class="f-fr">元</small>
					</span>
				</li>
				<li>
					<span>年化利率</span>
					<span class="f-fr">
						<input type="tel" placeholder="请输入年化利率" id="rate" value="10">
						<small class="f-fr">%</small>
					</span>
				</li>
				<li>
					<span>投入时长</span>
					<span class="f-fr">
						<input type="tel" placeholder="请输入投入时长" id="deadline" value="30">
						<i class="icon-angle-right f-fr"></i>
					</span>
				</li>
				<li>
					<span>时长单位</span>
					<span class="f-fr">
						<input type="text" id="date-type" value="天" readonly="true">
						<i class="icon-angle-right f-fr"></i>
					</span>
				</li>
				<li>
					<span>还款方式</span>
					<span class="f-fr">
						<input type="text" id="repayment-type" value="一次性" readonly="true">
						<i class="icon-angle-right f-fr"></i>
					</span>
				</li>
			</ul>
			<div class="btn-box">
				<a class="btn">计算</a>
			</div>
			<p class="text"><i class="warning f-fl"></i><span>本页面计算结果、计算公式仅供参考，具体以实际征收规则为准。</span></p>
		</div>

		<div class="overlay">
			<div class="modal modal-cal modal-cal-earnings">
				<h3 class="f-pr">
					<span>计算结果</span>
					<a class="close f-pa" id="close"></a>
				</h3>
				<ul class="cal">
					<li class="clearfix">
						<span class="f-fl">预期收益：</span>
						<span class="f-fr" id="total">0.00元</span>
					</li>
				</ul>
			</div>
		</div>

		<script type="text/javascript" src="../../js/zepto.min.js"></script>
		<script type="text/javascript" src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/mui.picker.min.js"></script>
		<script type="text/javascript" src="../../js/mui.poppicker.js"></script>
		<script type="text/javascript" src="../../js/common.js"></script>
		<script type="text/javascript">
			(function($, doc) {
				$.ready(function() {
					var array = [{
						value: '1',
						text: '天'
					}, {
						value: '2',
						text: '月'
					}];

					var picker = new $.PopPicker();
					picker.setData(array);
					var showPicker = doc.getElementById('date-type');
					showPicker.value = array[0].text;
					showPicker.addEventListener('tap', function() {
						picker.show(function(items) {
							showPicker.value = items[0].text;
						});
					}, false);

					var array_1 = [{
						value: '1',
						text: '一次性'
					}, {
						value: '2',
						text: '等额本息'
					}, {
						value: '3',
						text: '先息后本'
					}, {
						value: '4',
						text: '等本等息'
					}];

					var picker_1 = new $.PopPicker();
					picker_1.setData(array_1);
					var showPicker_1 = doc.getElementById('repayment-type');
					showPicker_1.value = array_1[0].text;
					showPicker_1.addEventListener('tap', function() {
						picker_1.show(function(items) {
							showPicker_1.value = items[0].text;
						});
					}, false);
				});
			})(mui, document);

			$(function() {
				var $pop = $(".overlay");

				function modalHidden($ele) {
					$ele.removeClass("modal-in");
					$ele.one("transitionend", function() {
						$ele.css("display", "none");
						$pop.removeClass("active");
					});
				}

				$(".btn").on("click", function() {
					var amount = $('#amount').val();
					var regex = /^([1-9][0-9]*(\.[0-9]{1,2})?|0\.(?!0+$)[0-9]{1,2})$/;
					if(!regex.test(amount)) {
						mui.toast("请输入正确的投资金额");
						return false;
					}
					var rate = $('#rate').val();
					if(rate == '') {
						mui.toast("请输入年化利率");
						return false;
					}
					var deadline = $('#deadline').val();
					if(deadline == '') {
						mui.toast("请输入投入时长");
						return false;
					}
					var credit_type = $('#repayment-type').val();
					var date_type = $('#date-type').val();
					var data = {
						'amount': amount,
						'rate': parseFloat(rate)/100,
						'dead_line': deadline,
						'date_type': date_type,
						'credit_type': credit_type
					};
					mui.ajax(base + 'credit/calculate', {
						type: 'get',
						data: data,
						dataType: 'json',
						success: function(data) {
							console.log('计算器返回数据：' + JSON.stringify(data));
							$('#total').html(data.all_principle_interest+'元');
						},
						error: function(data) {
							console.error(JSON.stringify(data));
						}
					});

					$pop.addClass("active");
					var $modal = $(".modal");
					$modal.css("display", "block");
					$modal.addClass("modal-in");

					$("#close").on("click", function(e) {
						modalHidden($modal);
						e.stopPropagation();
					});

					$(".overlay").on("click", function(e) {
						if(e.target.classList.contains("overlay")) {
							modalHidden($modal);
						}
					});
				});

				$('.icon-angle-left').on('tap', function() {
					mui.back();
				});
			});
		</script>
	</body>

</html>